<template>
	<view class="container">
		<u--form ref="queryForm" :model="query">
			<u-form-item label="" prop="box" style="display: flex;">
				<span style="margin-right: 20rpx;">料箱号</span>
				<u--input 
					placeholder="请输入/扫描" 
					v-model="query.containerCode" 
					suffixIcon="scan"
					@confirm="handlerConfirm"
					suffixIconStyle="font-size: 68rpx"
					style="flex: 1;">
				</u--input>
			</u-form-item>
		</u--form>
		<uni-table ref="suggetMaterial" border stripe emptyText="暂无数据">
			<uni-tr>
				<uni-th width="80">物料号</uni-th>
				<uni-th width="80">批次号</uni-th>
				<uni-th width="70">已分拣数量</uni-th>
				<uni-th width="80">操作</uni-th>
			</uni-tr>
			<uni-tr v-for="(item, index) in list" :key="index">
				<uni-td width="80">{{ item.materialCode }}</uni-td>
				<uni-td width="80">{{ item.materialBatch }}</uni-td>
				<uni-td width="70">
					<!-- <u-input
						v-model="item.sortingQty" 
						type="number" 
						placeholder="请输入数量"
					></u-input> -->
					{{ item.materialQty }}
				</uni-td>
				<uni-td width="80">
					<u-button style="width: 60px;height: 60rpx;" size="mini" type="primary" @click="commonSort(item)">分拣</u-button>
				</uni-td>
			</uni-tr>
		</uni-table>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		uniCard,
		uniTable,
		uniTr,
		uniTd,
		uniTh
	} from '@dcloudio/uni-ui'
	import { getMaterialDetail, submitSort, getSortList } from '@/api/work/sort.js'
	export default {
		components: {
			uniCard,
			uniTable,
			uniTr,
			uniTd,
			uniTh
		},
		data() {
			return {
				query: {
					containerCode: ''
				},
				list: []
			};
		},
		onLoad(options) {
			uni.$on('scancodedate',(data) => this.getCode(data.code))
			this.toQuery()
		},
		onUnload() {  
		  // 移除监听事件      
		  uni.$off('scancodedate')
		},
		methods: {
			async toQuery() {
				const res = await getSortList({})
				console.log(res)
				// this.list = res
			},
			getCode(code) {
				if (this.query.containerCode === '') {
					this.query.containerCode = code
					this.getDetail()
				}
			},
			// 根据料箱获取详情接口
			async getDetail() {
				const res = await getMaterialDetail({ containerCode: this.query.containerCode })
				console.log(res)
				this.list = res
			},
			// 回车调getDetail
			handlerConfirm() {
				this.getDetail()
			},
			async commonSort(item) {
				const newItem = {
					...item,
					sortingQty: item.materialQty
				}
				this.submit(newItem)
			},
			// 提交
			async submit (item) {
				const submitForm = {
					containerCode: this.query.containerCode,
					materialDtoList: [item]
				}
				// console.log(submitForm)
				const res = await submitSort(submitForm)
				if (res.meta.code === 0) {
					this.$refs.uToast.show({
						type: 'success',
						message: res.meta.msg
					})
					this.getDetail()
				} else {
					this.$refs.uToast.show({
						type: 'warning',
						message: res.meta.msg
					})
					return
				}
			},
			async sortException() {
				
			}
		}
	}
</script>

<style lang="scss" scoped>
::v-deep .uni-table-td {
	// padding: 10rpx 10rpx !important;
}
</style>
